<template>
  <!-- 页面-拓展属性 -->
  <div 
  :class="{'innerPageTable-box-Four': !useTableSearchBar}"
  class="extend innerPageTable-out-flex">
    <!-- 搜索区域 -->
    <SelfAdaption v-if="!useTableSearchBar">
      <Form
        :model="condition"
        ref="conditionForm"
        slot="adaption-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <template>
          <!-- 模板编码 -->
          <Form-item prop="templateCode" :label="$t('module.extend.templateCode')">
            <Input
              type="text"
              :maxlength="30"
              v-model.trim="condition.templateCode"
              :placeholder="$t('module.extend.tip.templateCode')"
              
              style="width:100%"
              @on-enter="searchHandler"
            />
          </Form-item>

          <!-- 模板名称 -->
          <Form-item prop="templateName" :label="$t('module.extend.templateName')">
            <Input
              type="text"
              :maxlength="30"
              v-model="condition.templateName"
              :placeholder="$t('module.extend.tip.templateName')"
              
              style="width:100%"
              @on-enter="searchHandler"
            ></Input>
          </Form-item>

          <!-- 模板类别 -->
          <Form-item prop="templateCategory" :label="$t('module.extend.templateCategory')">
            <Select
              v-model="condition.templateCategory"
              style="width:100%"
              
              :placeholder="$t('module.extend.tip.templateCategory')"
              @on-change="searchHandler"
              clearable
            >
              <Option
                v-for="cate in temCategory"
                :value="cate.vsiKey"
                :key="cate.vsiKey"
              >{{cate.vsiValue}}</Option>
            </Select>
          </Form-item>

          <!-- 模板状态 -->
          <Form-item prop="status" :label="$t('module.extend.status')">
            <CheckboxGroup
              v-model="condition.statuses"
              @on-change="searchHandler"
              class="status-checkbox"
            >
              <Checkbox label="0">{{ $t('module.extend.draft') }}</Checkbox>
              <Checkbox label="1">{{ $t('module.extend.issue') }}</Checkbox>
              <Checkbox label="2">{{ $t('module.extend.pigeonhole') }}</Checkbox>
            </CheckboxGroup>
          </Form-item>

          <!-- 查询\重置按钮 -->
          <Form-item prop="button" class="search-solt-btn">
            <RPButton optType="search" @click="searchHandler" />
            <RPButton optType="reset" @click="resetHandler" />
          </Form-item>
        </template>
      </Form>
    </SelfAdaption>
    <InnerPageTable ref="tableRef" :config="configer">
      <!-- handler bar 查询/重置-->
      <!--
      <div slot="handle-bar" class="handle-bar-two">
        <RPButton optType="search" @click="searchHandler" />
        <RPButton optType="reset" @click="resetHandler" />
      </div>
      -->
      <!-- table bar 添加-->
      <div slot="table-bar">
        <RPButton optType="create" @click="addHandler" />
        <!-- <Button @click.native="deleteHandler" icon="md-trash" >{{$t('common.delete')}}</Button> -->
      </div>
      <Form
        :model="condition"
        ref="conditionForm"
        slot="table-search-bar"
        v-if="useTableSearchBar"
        label-position="left"
        class="ivu-form-no-margin-bottom table-search-form"
        inline
      >
        <template>
          <!-- 模板编码 -->
          <Form-item prop="templateCode">
            <Input
              type="text"
              :maxlength="30"
              v-model.trim="condition.templateCode"
              :placeholder="$t('module.extend.tip.templateCode')"
              
              style="width:100%"
              clearable
              @on-enter="searchHandler"
              @on-blur="searchHandler"
              @on-clear="searchHandler"
            />
          </Form-item>

          <!-- 模板名称 -->
          <Form-item prop="templateName">
            <Input
              type="text"
              :maxlength="30"
              v-model="condition.templateName"
              :placeholder="$t('module.extend.tip.templateName')"
              
              style="width:100%"
              clearable
              @on-enter="searchHandler"
              @on-blur="searchHandler"
              @on-clear="searchHandler"
            ></Input>
          </Form-item>

          <!-- 模板类别 -->
          <Form-item prop="templateCategory">
            <Select
              v-model="condition.templateCategory"
              style="width:100%"
              
              :placeholder="$t('module.extend.tip.templateCategory')"
              @on-change="searchHandler"
              clearable
            >
              <Option
                v-for="cate in temCategory"
                :value="cate.vsiKey"
                :key="cate.vsiKey"
              >{{cate.vsiValue}}</Option>
            </Select>
          </Form-item>

          <!-- 模板状态 -->
          <Form-item prop="status" :label="$t('module.extend.status')">
            <CheckboxGroup
              v-model="condition.statuses"
              @on-change="searchHandler"
              class="status-checkbox"
            >
              <Checkbox label="0">{{ $t('module.extend.draft') }}</Checkbox>
              <Checkbox label="1">{{ $t('module.extend.issue') }}</Checkbox>
              <Checkbox label="2">{{ $t('module.extend.pigeonhole') }}</Checkbox>
            </CheckboxGroup>
          </Form-item>
        </template>
      </Form>
    </InnerPageTable>
  </div>
</template>
<script>
import { templateColumns } from "./columns";
import { getExtendAttrList, deleteTemplate, getCopyTemplate } from "@/api/extendAttrApi";
import locales from "./locales.js";
import AddTemplate from "./AddTemplate.vue";
import { getValueSetCode } from "@/api/valuesetCodeApi.js";
import { CoreModuleName } from "@/const.js";

const DefaulTcondition = {
  templateName: "",
  templateCode: "",
  templateCategory: "",
  // status: "",
  statuses: ["0", "1"]
};
export default {
  name: "extend-attr",
  mixins: [locales],
  data: () => ({
    templateList: [],
    condition: { ...DefaulTcondition },
    temCategory: [],
    templateList: {}
  }),
  computed: {
    configer() {
      const { condition } = this;
      return {
        loadDataFn: getExtendAttrList,
        columnsFn: templateColumns.bind(this),
        initParam: condition,
        autoFirst: true
      };
    }
  },
  created() {
    //初始化模板类别
    this.initTemplate();
  },
  mounted() {
    const { userInfo } = $store.state[CoreModuleName];
    DefaulTcondition.productId = ""; // currentRole.productId;  2.0 中没有产品的概念
    DefaulTcondition.tenantCode = userInfo.tenantCode;
    Object.assign(this.condition, { ...DefaulTcondition });
  },
  methods: {
    //初始化模板类别
    initTemplate() {
      getValueSetCode("TEMPLATE_CATE").then(res => {
        this.searchHandler();
        this.temCategory = res.data;
        const data = res.data;
        for (const template of data) {
          this.templateList[template.vsiKey] = template.vsiValue;
        }
      });
    },
    searchHandler() {
      this.$refs["tableRef"].load(Object.assign({}, this.condition));
    },
    resetHandler() {
      this.$refs.conditionForm.resetFields(1);
      // this.condition =  { ...DefaulTcondition };
      Object.assign(this.condition, DefaulTcondition);
      this.searchHandler();
    },
    addHandler(tmpd, type) {
      const { temCategory, resetHandler } = this;
      const tmpData = tmpd.id ? tmpd : { ...DefaulTcondition, templateVersion: 1, status: 0 };
      const props = { temCategory, tmpData, refresh: resetHandler.bind(this), isCopy: type };
      new this.$sidelipPage(AddTemplate, { props });
    },
    // 复制模板
    handleCopyTemplate(row) {
      getCopyTemplate(row.id).then(res => {
        let newRow = row;
        newRow.id = res.data;
        newRow.status = 0;
        newRow.templateVersion++;
        delete newRow.version;
        this.addHandler(newRow, true);
        // this.resetHandler();
      });
    },
    deleteHandler(row) {
      // const { selection } = this.$refs.tableRef;
      // if (selection.length === 0) {
      //   this.$message.error("没有要删除的选项");
      //   return;
      // }
      // selection.map(r => r.id)
      this.$confirm
        .warning(this.$t("common.warning.confirmToDelete"))
        .then(() =>
          deleteTemplate([row.id]).then(() => {
            this.$message.success("删除成功");
            this.resetHandler();
          })
        )
        .catch(_ => _);
      // this.$Modal.confirm({
      //   title: this.$t("common.warning.confirmToDelete"),
      //   content: "确定删除?",
      //   onOk: () =>
      //     deleteTemplate([row.id]).then(() => {
      //       this.$message.success("删除成功");
      //       this.resetHandler();
      //     })
      // });
      // deleteTemplate(selection.map(r => r.id));
    },
    editHandler(row) {
      // this.addHandler
    }
  }
};
</script>

<style lang="less">
.status-checkbox {
  padding-top: 2px !important;
  .ivu-checkbox-wrapper {
    font-size: 14px !important;
    span {
      margin-right: 2px;
    }
  }
}
.table-search-form {
  display: flex;
  .ivu-form-item {
    display: flex;
  }
}
</style>